<template>
  <div class="fu17" ref="test">
    <a-button @click="change('str1', 'DD街区')">修改str</a-button>
    <a-button @click="change('str2', '意外之财')" style="margin-left: 10px"
      >修改str2</a-button
    >
    <a-button @click="change('str3', '星界赐福')" style="margin-left: 10px"
      >修改str3</a-button
    >
    <a-button ref="mybtn" @click="gochange" style="margin-left: 10px"
      >修改子组件作用域插槽的值</a-button
    >
    <a-button @click="change('str4', '森岭幻像')" style="margin-left: 10px"
      >修改str4</a-button
    >
  </div>
  <div>
    <d17 ref="myref">
      <template v-slot>
        <div class="cs_item" v-text="showInfo.str1"></div>
      </template>
      <template v-slot:zi>
        <div class="cs_item" v-text="showInfo.str2"></div>
      </template>
      <!-- 插槽简写 -->
      <template #zi_sec>
        <div class="cs_item" v-text="showInfo.str3"></div>
      </template>
      <template #zi_thi="{ hh }">
        <div class="cs_item" v-text="hh"></div>
      </template>
      <!-- 动态插槽 -->
      <template #[slotname]>
        <div class="cs_item" v-text="showInfo.str4"></div>
      </template>
    </d17>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import d17 from "./demo17_child.vue";

let showInfo = reactive<Record<string, any>>({
  str1: "应急护甲",
  str2: "后期专家",
  str3: "变形重组器",
  str4: "战斗法师",
});

const slotname = ref("zi_fou");

const change = (key: string, value: string): void => {
  showInfo[key] = value;
};

const myref = ref();
const gochange = () => {
  nextTick(() => {
    myref.value.changeAstr("绝对堕落");
  });
};
</script>

<style scoped lang="scss">
.fu17 {
  padding: 10px;
  width: 100%;
  height: 200px;
  background-color: #eee;
  margin-bottom: 20px;
}
.cs_item {
  margin-bottom: 10px;
}
</style>
